<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<title>Nanoblok r0.6 Alpha</title> 
	
	<style>
		body {margin: 0px;}
	</style>
</head>
<body onload="start()"> 
 
<script src="utils3d.js" type="text/javascript"> </script>
<script src="CanvasMatrix.js" type="text/javascript"> </script>
<script src="utils.js" type="text/javascript"> </script> 

<script id="vshader" type="x-shader/x-vertex"> 
	uniform mat4 u_modelViewProjMatrix;
	uniform mat4 u_normalMatrix;
	uniform vec3 lightDir;
 
	attribute vec3 vNormal;
	attribute vec4 vTexCoord;
	attribute vec4 vPosition;
 
	varying float v_Dot;
	varying vec2 v_texCoord;
 
	void main()
	{
		gl_Position = u_modelViewProjMatrix * vPosition;
		v_texCoord = vTexCoord.st;
		vec4 transNormal = u_normalMatrix * vec4(vNormal,1);
		v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
	}
</script> 
 
<script id="fshader" type="x-shader/x-fragment"> 
	uniform sampler2D sampler2d;
 
	varying float v_Dot;
	varying vec2 v_texCoord;
 
	void main()
	{
		vec2 texCoord = vec2(v_texCoord.s, 1.0 - v_texCoord.t);
		vec4 color = texture2D(sampler2d,texCoord);
		color += vec4(0.7,0.1,0.1,1);
		gl_FragColor = vec4(color.xyz * v_Dot, color.a);
	}
</script> 
 
<script> 
	function init()
	{
		// Initialize
		var gl = initWebGL("example1",								// The id of the Canvas Element
							"vshader", "fshader",					// The ids of the vertex and fragment shaders
							[ "vNormal", "vTexCoord", "vPosition"], // The vertex attribute names used by the shaders.
																	// The order they appear here corresponds to their index
																	// used later.
							[ 1, 1, 1, 1 ], 10000);					// The clear color and depth values
 
		// Set some uniform variables for the shaders
		// Light direction
		gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0.3, 1, 3);
		gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);
		
		// Enable texturing
		gl.enable(gl.TEXTURE_2D);
		
		// Create a box. On return 'gl' contains a 'box' property with the BufferObjects containing
		// the arrays for vertices, normals, texture coords, and indices.
		gl.box = makeBox(gl);
		
		// Load an image to use. Returns a CanvasTexture object
		// spiritTexture = loadImageTexture(gl, "spirit.jpg");
		
		// Create some matrices to use later and save their locations in the shaders
		gl.mvMatrix = new CanvasMatrix4();
		gl.u_normalMatrixLoc = gl.getUniformLocation(gl.program, "u_normalMatrix");
		gl.normalMatrix = new CanvasMatrix4();
		gl.u_modelViewProjMatrixLoc = gl.getUniformLocation(gl.program, "u_modelViewProjMatrix");
		gl.mvpMatrix = new CanvasMatrix4();
		
		// Enable all the vertex arrays
		gl.enableVertexAttribArray(0);
		gl.enableVertexAttribArray(1);
		gl.enableVertexAttribArray(2);
 
		// Setup all the vertex attributes for vertices, normals and texCoords
		gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.vertexObject);
		gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
		
		gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.normalObject);
		gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
		
		gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.texCoordObject);
		gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
		
		// Bind the index array
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.box.indexObject);
		
		// For the grid. IN PROGRESS
		// gl.grid = makeGrid(gl);
		// gl.enableVertexAttribArray(3);
		// gl.bindBuffer(gl.ARRAY_BUFFER, gl.grid.vertexObject);
		// gl.vertexAttribPointer(3, 2, gl.FLOAT, false, 0, 0);
		// 
		// gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.grid.indexObject);

		return gl;
	}
	
	width = -1;
	height = -1;
	var xKey = 0;
	var yKey = 0;
	var zKey = 100;
	
	function reshape(gl)
	{
		var canvas = document.getElementById('example1');
		// if (canvas.clientWidth == width && canvas.clientHeight == height)
			// return;
 
		width = canvas.clientWidth;
		height = canvas.clientHeight;
		
		// Set the viewport and projection matrix for the scene
		gl.viewport(0, 0, width, height);
		gl.perspectiveMatrix = new CanvasMatrix4();
		gl.perspectiveMatrix.lookat(xKey, yKey, zKey, 0, 0, 0, 0, 1, 0);
		gl.perspectiveMatrix.perspective(30, width/height, 1, 10000);
		// gl.perspectiveMatrix.ortho(0, width, height, 0, 1, 10000); // Workin on this
	}
	
	function drawPicture(gl)
	{
		// Make sure the canvas is sized correctly.
		reshape(gl);
		
		// Clear the canvas
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
		// Make a model/view matrix.
		gl.mvMatrix.makeIdentity();
		gl.mvMatrix.rotate(45, 0, 1, 0);
		gl.mvMatrix.rotate(45, 1, 0, 0);
 
		// Construct the normal matrix from the model-view matrix and pass it in
		gl.normalMatrix.load(gl.mvMatrix);
		gl.normalMatrix.invert();
		gl.normalMatrix.transpose();
		gl.uniformMatrix4fv(gl.u_normalMatrixLoc, false, gl.normalMatrix.getAsCanvasFloatArray());
		
		// Construct the model-view * projection matrix and pass it in
		gl.mvpMatrix.load(gl.mvMatrix);
		gl.mvpMatrix.multRight(gl.perspectiveMatrix);
		gl.uniformMatrix4fv(gl.u_modelViewProjMatrixLoc, false, gl.mvpMatrix.getAsCanvasFloatArray());
		
		// Bind the texture to use
		// gl.bindTexture(gl.TEXTURE_2D, spiritTexture);
 
		// Draw the cube
		gl.drawElements(gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0);
		
		// gl.drawElements(gl.LINES, gl.grid.numIndices, gl.UNSIGNED_BYTE, 0);
 
		// Finish up.
		gl.flush();
		
		// Show the framerate
		framerate.snapshot();
		
		currentAngle += incAngle;
		if (currentAngle > 360)
			currentAngle -= 360;
			
		document.getElementById("stats").innerHTML = "Keys: WS/AD/RF<br>x: " + xKey + ", y: " + yKey + ", z: " + zKey;
	}
	
	function start()
	{
		if (!document.getElementById("example1").getContext("webkit-3d"))
			alert("You don't have a version of WebKit with WebGL or you don't have it enabled.")
		var gl = init();
		currentAngle = 0;
		incAngle = 0.5;
		framerate = new Framerate("framerate");
		setInterval(function() { drawPicture(gl) }, 10);
		
		testInput();
	}
</script>

<script>
	function testInput() {
		window.addEventListener('keydown', function(evt) {
			// Input Handling
			if (evt.type == 'keydown') {
				// Some browsers support evt.charCode, some only evt.keyCode
				if (evt.charCode) {
					charCode = evt.charCode;
				}
				else {
					charCode = evt.keyCode;
				}
			}
			// W
			if (charCode == 87) {
				zKey--;
			}
			// S
			if (charCode == 83) {
				zKey++;
			}
			// A
			if (charCode == 65) {
				xKey--;
			}
			// D
			if (charCode == 68) {
				xKey++;
			}
			// R
			if (charCode == 82) {
				yKey--;
			}
			// F
			if (charCode == 70) {
				yKey++;
			}
		}, false);
	}
</script>
 
<canvas id="example1" style="width:100%; height:100%" width="100%" height="95%"> 
	Your browser does not support the canvas tag.
</canvas> 
<div id="framerate" style="position: absolute; top: 0px; left: 5px;"></div><div id="stats" style="position: absolute; top: 20px; left: 5px;"></div>
</body> 
</html>